<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <form data-form="search">
        <div class="audit-top">
            <span>问卷名</span>
            <span class="input-select">
                <input type="text" name="questionTitleLike" value="" placeholder="问卷名模糊搜索"/>
            </span>

            <span class="ml-20">问卷状态</span>
            <span data-select="disableFlag"></span>

            <a class="search-btn ml-20" href="javascript:" data-btn="search">搜索</a>
            <a class="search-btn ml-10 btn-line" href="javascript:" data-btn="addRole">新增问卷</a>
        </div>
    </form>
    <div data-list="content" class="table-con  mt-20">

    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<!--图片上传-->
<link href="/ui/pc/js/lightbox/css/lightbox.min.css" rel="stylesheet"/>
<script src="/ui/pc/js/lightbox/js/lightbox.js"></script>
<script src="/admin/public/uploadFile.js"></script>
<script src="/admin/public/getUploadImgWidget.js"></script>

<script src="/ui/pc/js/laydate/laydate.js"></script>

<script src="/admin/question/js/addQuestionDialog.js"></script>
<script src="/admin/question/js/updQuestionDialog.js"></script>
<script src="/admin/question/js/questionFormBuilder.js"></script>

<script src="/admin/question/js/disableQuestionDialog.js"></script>
<script src="/admin/question/js/enabledQuestionDialog.js"></script>

<script>
    const $searchForm = $('[data-form="search"]');
    const $listWarp = $('[data-list="content"]');

    $searchForm.find('[data-select="disableFlag"]').replaceWith($.getSelect("disableFlag", [
        {name: "请选择", value: ""},
        {name: "正常", value: 0},
        {name: "停用", value: 1},
    ]));

    const listHandler = $.commonList({
        $warp: $listWarp,
        column: [
            {title: "标题", value: "questionTitle"},
            {title: "简介", value: "questionIntro"},
            {
                title: "广告图", value: ({adImgUrl}) => {
                    if (!adImgUrl) {
                        return "";
                    }

                    return $(`
                        <a data-lightbox="example-set" href="${adImgUrl}">
                            <img src="${adImgUrl}" alt="">
                        </a>
                    `);

                }
            },
            {title: "金额", value: ({price}) => (price / 100).toFixed(2)},
            {title: "状态", value: ({disableFlag}) => disableFlag === 1 ? "停用" : "启用"},
            {title: "添加时间", value: "addTime"},
            {
                title: "操作", value: data => {
                    const {disableFlag, questionId, questionTitle} = data;
                    const $updBtn = $('<a href="javascript:" class="c-btn btn-blue m5">编辑</a>');
                    const $disableBtn = $('<a href="javascript:" class="c-btn btn-red m5">停用</a>');
                    const $enabledBtn = $('<a href="javascript:" class="c-btn btn-red m5">启用</a>');

                    $updBtn.on("click", () => {
                        updQuestionDialog(questionId,
                            () => {
                                listHandler.getPage();
                            }
                        );
                    });

                    $disableBtn.on("click", () => {
                        disableQuestionDialog({
                            questionTitle,
                            questionId,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    });

                    $enabledBtn.on("click", () => {
                        enabledQuestionDialog({
                            questionTitle,
                            questionId,
                            callback() {
                                listHandler.getPage();
                            }
                        });
                    })

                    //控制操作按钮
                    const $dom = $('<div></div>');
                    $dom.append($updBtn);
                    if (disableFlag === 1) {
                        $dom.append($enabledBtn);
                    } else {
                        $dom.append($disableBtn);

                    }

                    return $dom;
                }
            },
        ],
        dataSource: (currPage, callback) => {
            const param = $.getFormData($searchForm);
            param.pageIndex = currPage;
            param.pageSize = 10;
            queryQuestionPage(param, ({Code, Message, Result = [], Total}) => {
                if (Code !== 10000) {
                    return callback(Message, 0);
                }

                return callback(Result, Total, param.pageSize);
            });
        }
    });

    //搜索按钮
    $searchForm.find('[data-btn=search]').on("click", () => {
        listHandler.getPage(1);
    });

    //新增按钮
    $searchForm.find('[data-btn=addRole]').on("click", () => {
        addQuestionDialog(() => {
            listHandler.getPage(1);
        })
    });

    function queryQuestionPage(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/Question/queryQuestionPage"
        }, callback)
    }



</script>
</body>
</html>